﻿@model IEnumerable<QuanLyGiaoVuUI.Models.MonHoc.MonHocViewModel>

@{
    Layout = null;
}

<style>
    .table-holder {
        height: 400px;
    }
</style>

<input type="hidden" value="" id="selectedMonHocId" />
<input type="hidden" value="" id="maVaTenMonHoc" />
<input type="hidden" value="" id="maMonHoc" />
<div class="table-holder">
    <table class="data display datatable">
        <tr>
            <th class="sorting"></th>
            <th class="sorting">
                @Html.DisplayNameFor(model => model.MaMonHoc)
            </th>
            <th class="sorting">
                @Html.DisplayNameFor(model => model.TenMonHoc)
            </th>
            <th class="sorting">
                @Html.DisplayNameFor(model => model.TongSoTinChi)
            </th>
            <th class="sorting">
                @Html.DisplayNameFor(model => model.SoTinChiLyThuyet)
            </th>
            <th class="sorting">
                @Html.DisplayNameFor(model => model.HocKy)
            </th>
        </tr>
        @{int count = 0;}
        @foreach (var item in Model)
        {
            <tr class="gradeA @(++count % 2 == 0 ? "even" : "odd")">
                <td>
                    @Html.RadioButton("ID", item.ID, new { @class = "selectId" })
                </td>
                <td class="maMonHocholder">
                    @Html.DisplayFor(modelItem => item.MaMonHoc)
                </td>
                <td class="tenMonHocholder">
                    @Html.DisplayFor(modelItem => item.TenMonHoc)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.TongSoTinChi)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SoTinChiLyThuyet)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.HocKy)
                </td>
            </tr>
        }
    </table>
</div>
<script>
    $(document).ready(function () {
        $("tr").each(function () {
            $(this).click(function () {
                var selectedRadio = $(this).find("input[type=radio]").first();
                var selectedMonHocId = selectedRadio.val();
                $(this).find("input[type=radio]").attr('checked', true);
                $("#selectedMonHocId").val(selectedMonHocId);
                var maMonHoc = selectedRadio.parent().parent().find(".maMonHocholder").first().html();
                var tenMonHoc = selectedRadio.parent().parent().find(".tenMonHocholder").first().html();
                $("#maVaTenMonHoc").val(maMonHoc + " - " + tenMonHoc);
                $("#maMonHoc").val(maMonHoc);
            });
        });

        $(".selectId").each(function () {
            $(this).click(function () {
                $("#selectedMonHocId").val($(this).val());
                var maMonHoc = $(this).parent().parent().find(".maMonHocholder").first().html();
                var tenMonHoc = $(this).parent().parent().find(".tenMonHocholder").first().html();
                $("#maVaTenMonHoc").val(maMonHoc + " - " + tenMonHoc);
                $("#maMonHoc").val(maMonHoc);
            });
        });
    });
</script>
